<template>
  <div class="container">
    <el-button class="edit-button" type="primary" icon="el-icon-edit" @click="editResume" v-if="editable">编辑简历</el-button>
    <div class="main-box">
      <canvas id="canvas" width="1048" height="50" style="padding: 0; margin: 1px;border: 0;" />
      <div />
      <div class="main-title">
        个人简历
      </div>
      <div class="basic-bar flex-row">
        <div class="basic-left">
          <div class="underLine flex-row">
            <div class="basic-element" style="width: 45%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                姓名:{{ resume.name }}
              </div>
            </div>

            <div class="basic-element" style="width: 55%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                性别:{{ resume.gender }}
              </div>
            </div>
          </div>
          <div class="underLine flex-row">
            <div class="basic-element" style="width: 45%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                学历:{{ resume.education }}
              </div>
            </div>

            <div class="basic-element" style="width: 55%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                出生年月: <span>{{ resume.birthday | parseTime('{y}-{m}-{d}') }}</span>
              </div>
            </div>
          </div>
          <div class="underLine flex-row">
            <div class="basic-element" style="width: 45%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                电话:{{ resume.phone }}
              </div>
            </div>

            <div class="basic-element" style="width: 55%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                邮箱:{{ resume.mail }}
              </div>
            </div>
          </div>
          <div class="underLine flex-row">
            <div class="basic-element" style="width: 95%;">
              <div class="icon iconfont round" />
              <div class="basic-text">
                地址:{{ resume.address }}
              </div>
            </div>
          </div>
        </div>
        <div class="basic-right">
          <img :src="$store.getters.avatar" width="200" height="200" alt="">
        </div>
      </div>
      <canvas id="divider1" width="1000" height="75" style="width: 1000px; height: 75px; padding: 0; margin-left: 50px;border: 0;" />
      <div v-for="(item, index) in resume.eduBackgrounds" :key=" 'eduBackground' +index " class="element">
        <div class="title flex-row">
          <div class="time">{{ item.timeSpan[0] | parseTime('{y}年{m}月') }}-{{ item.timeSpan[1] | parseTime('{y}年{m}月') }}</div>
          <div class="school">{{ item.school }}</div>
          <div class="major">{{ item.major }}</div>
        </div>
        <div class="course-title">
          学习经历：
        </div>
        <div class="course-list">
          {{ item.intro }}
        </div>
      </div>
      <canvas id="divider2" width="1000" height="75" style="width: 1000px; height: 75px; padding: 0; margin-left: 50px;border: 0;" />
      <div v-for="(item, index) in resume.practices" :key="index" class="element">
        <div class="title flex-row">
          <div class="time">{{ item.timeSpan[0] | parseTime('{y}年{m}月') }}-{{ item.timeSpan[1] | parseTime('{y}年{m}月') }}</div>
          <div class="school">{{ item.name }}</div>
          <div class="major">{{ item.position }}</div>
        </div>
        <div class="course-title">
          工作描述：
        </div>
        <div class="couse-list">
          {{ item.intro }}
        </div>
      </div>
      <canvas id="divider4" width="1000" height="75" style="width: 1000px; height: 75px; padding: 0; margin-left: 50px;border: 0;" />
      <div class="element">
        <div class="projects">
          <div v-for="(item, index) in resume.projects" :key="index" class="project">
            <div class="project-name">{{ item.name }}</div>
            <div class="project-tech">{{ item.tech }}</div>
            <div class="course-title">
              项目描述：
            </div>
            <div class="project-description">{{ item.intro }}</div>
            <div class="project-repository">远程仓库地址: <a :href="item.url" class="text-primary">{{ item.url }}</a></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getResumebyId } from '@/api/resume'
export default {
  name: 'Resume',
  props: {
    editable: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      resume: {
        name: '',
        birthday: '',
        gender: '',
        education: '',
        address: '',
        phone: '',
        mail: '',
        img: '',
        eduBackgrounds: [],
        practices: [],
        projects: []
      },
      isEditMode: false
    }
  },
  mounted() {
    this.draw()
    this.getResume()
  },
  methods: {
    getResume() {
      getResumebyId(this.id).then(
        res => {
          if (res.data.items.id) {
            const resume = res.data.items
            resume.birthday = new Date(resume.birthday)
            const map = ['eduBackgrounds', 'practices']
            for (const key of map) {
              for (const i in resume[key]) {
                resume[key][i]['timeSpan'] = []
                resume[key][i]['timeSpan'].push(new Date(resume[key][i].startTime))
                resume[key][i]['timeSpan'].push(new Date(resume[key][i].endTime))
              }
            }
            this.resume = resume
          }
        }
      )
    },
    editResume() {
      this.$emit('edit', { resume: this.resume })
    },
    drawDivider(title, id) {
      var c = document.getElementById(id)
      var cxt = c.getContext('2d')
      cxt.with = 1000
      cxt.height = 100
      cxt.fillStyle = '#03C4AA'
      cxt.moveTo(0, 0)
      cxt.lineTo(200, 0)
      cxt.lineTo(300, 50)
      cxt.lineTo(0, 50)
      cxt.lineTo(0, 0)
      cxt.fill()

      cxt.beginPath()
      cxt.moveTo(280, 25)
      cxt.lineTo(950, 25)
      cxt.lineTo(980, 50)
      cxt.lineTo(350, 50)
      cxt.lineTo(280, 25)

      cxt.fill()
      cxt.save()
      cxt.fillStyle = '#ffffff'
      cxt.beginPath()
      cxt.arc(30, 25, 15, 0, Math.PI * 2, true)
      cxt.fill()
      var context = document.getElementById(id).getContext('2d')
      // context.font = "18px bolder 黑体"
      cxt.font = 'normal normal bold 20px Arial'
      context.lineWidth = '20px'
      context.fillStyle = '#ffffff'
      context.textAlign = 'center'
      context.fillText(title, 100, 32)
    },
    draw() {
      var c = document.getElementById('canvas')
      var cxt = c.getContext('2d')
      cxt.fillStyle = '#03C4AA'
      cxt.moveTo(0, 0)
      cxt.lineTo(1050, 0)
      cxt.lineTo(1048, 25)
      cxt.lineTo(725, 25)
      cxt.lineTo(625, 50)
      cxt.lineTo(425, 50)
      cxt.lineTo(335, 25)
      cxt.lineTo(0, 25)
      cxt.lineTo(0, 0)
      cxt.fill()

      cxt.beginPath()
      cxt.strokeStyle = '#03C4AA'
      cxt.moveTo(0, 0)
      cxt.lineTo(0, 50)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(1048, 0)
      cxt.lineTo(1048, 50)
      cxt.stroke()
      this.drawDivider('教育经历', 'divider1')
      this.drawDivider('工作经历', 'divider2')
      // this.drawDivider('技能证书', 'divider3')
      this.drawDivider('项目经历', 'divider4')
    }
  }
}
</script>
<style lang="scss">
.container{
  overflow: scroll;
}
.main-box{
  padding: 0 0 80px;
  margin:50px auto;
  width: 1055px;
  border: 3px solid #03C4AA;
  background-color: aliceblue;
  .main-title{
    width: 1000px;
    padding-left: 50px;
    font-weight:bold;
    font-size: 50px;
    color: #03C4AA;
  }
  .underLine{
    width: 95%;
    border-bottom: 3px solid #03C4AA;
    font-size: 25px;
    padding: 10px 0;
  }
  .basic-left{
    width: 65%;
    margin: 50px;
  }
  .basic-element{
    display: flex;
    flex-direction: row;
    align-items:center;
  }
  .basic-element .icon{
    font-size: 15px;
    padding: 4px;
    background-color: #03C4AA;
    border-radius: 50%;
    color: white;
  }
  .basic-element .basic-text{
    font-size: 20px;
    margin-left: 5px;
  }
  .flex-row{
    display: flex;
    flex-direction: row;
    align-items:center;
  }
  .element{
    margin: 5px 50px 20px 70px;
    width: 930px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
  }
  .element .title{
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .element .course-title{
    margin-bottom: 5px;
  }
  .projects{
    .project{
      line-height: 25px;
      .project-name{
        font-weight: bold;
        line-height: 30px;
      }
    }
  }
  .link{
    color:#03C4AA;
  }
  a{
    font-size: 10px;
  }
  td{
    border: 1px dashed #03C4AA;
  }
}
.edit-button{
  float: right;
  margin-right: 20px;
}
</style>
